<template>
  <div class="resume-generator">
  <el-container>
    <!-- 左侧编辑区域 -->
    <el-aside width="400px">
      <div class="editor-container">
        <h2>简历信息编辑</h2>
        
        <!-- 模板选择按钮 -->
        <el-button 
          type="primary" 
          @click="showTemplateDialog"
          class="template-button">
          选择模板（当前：{{ currentTemplate.name }}）
        </el-button>

        <!-- 模板选择对话框 -->
        <el-dialog
          title="选择简历模板"
          v-model="templateDialogVisible"
          width="70%">
          <div class="template-container">
            <div class="template-list">
              <div
                v-for="template in templates"
                :key="template.id"
                class="template-item"
                :class="{ 'active': selectedTemplateInDialog === template.id }"
                @click="selectTemplate(template)">
                <img 
                  :src="template.preview" 
                  :alt="template.name" 
                  class="template-preview">
                <div class="template-name">{{ template.name }}</div>
              </div>
            </div>
            <div class="template-metadata">
              <h3>{{ selectedTemplateInDialogInfo.name }}</h3>
              <p>布局类型：{{ selectedTemplateInDialogInfo.styles?.layout }}</p>
              <p>主题颜色：
                <span 
                  class="color-preview" 
                  :style="{backgroundColor: selectedTemplateInDialogInfo.styles?.themeColor}">
                </span>
              </p>
            </div>
          </div>
          <template #footer>
            <div class="dialog-footer">
              <el-button @click="templateDialogVisible = false">取消</el-button>
              <el-button type="primary" @click="applyTemplate">应用模板</el-button>
            </div>
          </template>
        </el-dialog>

        <!-- 基本信息编辑 -->
        <el-collapse v-model="activeNames">
          <el-collapse-item title="基本信息" name="1">
            <el-form :model="resumeData.basic" label-width="80px">
              <el-form-item label="头像">
                <div class="avatar-uploader">
                  <el-upload
                    class="avatar-upload"
                    action="#"
                    :show-file-list="false"
                    :before-upload="beforeAvatarUpload"
                    :http-request="handleAvatarUpload"
                    accept="image/*"
                  >
                    <div class="upload-content">
                      <img 
                        v-if="resumeData.basic.avatar" 
                        :src="resumeData.basic.avatar" 
                        class="avatar"
                        :style="{
                          borderRadius: isAvatarRounded ? '50%' : '4px'
                        }">
                      <div v-else class="upload-tips">
                        <i class="el-icon-plus avatar-uploader-icon"></i>
                        <div class="tip-text">点击上传头像</div>
                        <div class="size-tip">建议尺寸：200x200px</div>
                      </div>
                    </div>
                  </el-upload>
                </div>
              </el-form-item>
              <el-form-item label="姓名">
                <el-input v-model="resumeData.basic.name">
                  <template #prefix>
                    <i class="el-icon-user"></i>
                  </template>
                </el-input>
              </el-form-item>
              <el-form-item label="性别">
                <el-radio-group v-model="resumeData.basic.gender">
                  <el-radio label="男"><i class="el-icon-male"></i> 男</el-radio>
                  <el-radio label="女"><i class="el-icon-female"></i> 女</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="年龄">
                <el-input-number 
                  v-model="resumeData.basic.age" 
                  :min="18" 
                  :max="60"
                  controls-position="right"
                ></el-input-number>
              </el-form-item>
              <el-form-item label="邮箱">
                <el-input v-model="resumeData.basic.email"></el-input>
              </el-form-item>
              <el-form-item label="电话">
                <el-input v-model="resumeData.basic.phone"></el-input>
              </el-form-item>

              <el-form-item label="求职意向">
                <el-input v-model="resumeData.basic.jobTarget">
                  <template #prefix>
                    <i class="el-icon-aim"></i>
                  </template>
                </el-input>
              </el-form-item>

              <el-form-item label="所在地">
                <el-input v-model="resumeData.basic.location">
                  <template #prefix>
                    <i class="el-icon-location"></i>
                  </template>
                </el-input>
              </el-form-item>
              <el-form-item label="个人简介">
                <el-input
                  type="textarea"
                  v-model="resumeData.basic.summary"
                  :rows="3"
                  placeholder="用简洁的语言介绍自己"
                ></el-input>
              </el-form-item>
            </el-form>
          </el-collapse-item>

          <!-- 教育经历 -->
          <el-collapse-item title="教育经历" name="2">
            <div v-for="(edu, index) in resumeData.education" :key="'edu-' + index">
              <el-form :model="edu" label-width="80px">
                <el-form-item label="学校">
                  <el-input v-model="edu.school"></el-input>
                </el-form-item>
                <el-form-item label="专业">
                  <el-input v-model="edu.major"></el-input>
                </el-form-item>
                <el-form-item label="学历层次">
                <el-select v-model="edu.degree" placeholder="请选择">
                  <el-option label="专科" value="专科"></el-option>
                  <el-option label="本科" value="本科"></el-option>
                  <el-option label="硕士" value="硕士"></el-option>
                  <el-option label="博士" value="博士"></el-option>
                </el-select>
              </el-form-item>

              <el-form-item label="GPA">
                <el-input v-model="edu.gpa" placeholder="例如：3.8/4.0">
                  <template #suffix>绩点</template>
                </el-input>
              </el-form-item>

              <el-form-item label="荣誉奖项">
                <el-input 
                  v-model="edu.honors"
                  placeholder="用逗号分隔，例：国家奖学金,优秀毕业生"
                ></el-input>
              </el-form-item>
                <el-form-item label="时间">
                  <el-date-picker
                    v-model="edu.period"
                    type="daterange"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期">
                  </el-date-picker>
                </el-form-item>
              </el-form>
              <el-button 
                type="danger" 
                @click="removeEducation(index)" 
                size="small">
                删除
              </el-button>
            </div>
            <el-button type="primary" @click="addEducation" size="small">
              添加教育经历
            </el-button>
          </el-collapse-item>

          <!-- 项目经验 -->
          <el-collapse-item title="项目经验" name="3">
            <div v-for="(proj, index) in resumeData.projects" :key="'proj-' + index">
              <el-form :model="proj" label-width="80px">
                <el-form-item label="项目名称">
                  <el-input v-model="proj.name"></el-input>
                </el-form-item>
                <el-form-item label="项目角色">
                  <el-input v-model="proj.role" placeholder="例如：前端开发负责人"></el-input>
                </el-form-item>

                <el-form-item label="项目时长">
                  <el-input v-model="proj.duration" placeholder="例如：2022.03-2022.06"></el-input>
                </el-form-item>

                <el-form-item label="项目描述">
                  <el-input type="textarea" v-model="proj.description"></el-input>
                </el-form-item>
                <el-form-item label="技术栈">
                  <el-input v-model="proj.technologies"></el-input>
                </el-form-item>
              </el-form>
              <el-button 
                type="danger" 
                @click="removeProject(index)" 
                size="small">
                删除
              </el-button>
            </div>
            <el-button type="primary" @click="addProject" size="small">
              添加项目经验
            </el-button>
          </el-collapse-item>

          <!-- 技能特长 -->
          <el-collapse-item title="技能特长" name="4">
            <el-form :model="resumeData.skills" label-width="80px">
              <el-form-item label="技能列表">
                <el-input
                  type="textarea"
                  v-model="resumeData.skills.list"
                  placeholder="每行一个技能"
                  :rows="5">
                </el-input>
              </el-form-item>
            </el-form>
          </el-collapse-item>
        </el-collapse>
      </div>
    </el-aside>

    <!-- 右侧预览区域 -->
    <el-main>
      <div class="preview-container">
        <div class="preview-actions">
          <el-button type="primary" @click="downloadPDF">
            下载PDF
          </el-button>
        </div>
        <div 
          id="resume-preview"
          :class="['resume-preview', `template-${selectedTemplate}`, `layout-${currentTemplate.styles?.layout}`]"
          :style="previewStyles">
          
          <!-- 单栏布局 -->
          <template v-if="currentTemplate.styles?.columns === 1">
            <div class="basic-info" :class="{ 'with-avatar': resumeData.basic.avatar }">
              <div v-if="resumeData.basic.avatar" class="avatar-container">
                <img 
                  :src="resumeData.basic.avatar" 
                  class="preview-avatar" 
                  :class="{ 'rounded': isAvatarRounded }">
              </div>
              <div class="info-text">
                <h1>{{ resumeData.basic.name }}</h1>
                <div class="contact-info">
                  <p><i class="el-icon-user"></i> {{ resumeData.basic.gender }} | {{ resumeData.basic.age }}岁</p>
                  <p><i class="el-icon-aim"></i> {{ resumeData.basic.jobTarget }}</p>
                  <p><i class="el-icon-location"></i> {{ resumeData.basic.location }}</p>
                  <p><i class="el-icon-message"></i> {{ resumeData.basic.email }}</p>
                  <p><i class="el-icon-phone"></i> {{ resumeData.basic.phone }}</p>
                </div>
              </div>
            </div>
            <!-- 新增个人简介 -->
              <div v-if="resumeData.basic.summary" class="summary-section">
                <h2><i class="el-icon-notebook-2"></i> 个人简介</h2>
                <p class="summary-content">{{ resumeData.basic.summary }}</p>
              </div>

            <h2>教育经历</h2>
            <div 
              v-for="(edu, index) in resumeData.education" 
              :key="'edu-preview-' + index" 
              class="section">
              <h3>{{ edu.school }}
                <span class="degree-tag">{{ edu.degree }}</span>
              </h3>
              <div class="edu-details">
                <p v-if="edu.major" class="major">
                  <i class="el-icon-notebook"></i> {{ edu.major }}
                </p>
                绩点：<span class="gpa">{{ edu.gpa }}</span>
                <p class="period">
                  <i class="el-icon-date"></i> {{ formatDate(edu.period[0]) }} - {{ formatDate(edu.period[1]) }}
                </p>
                <div v-if="edu.honors" class="honors">
                  <el-tag 
                    v-for="(honor, hIndex) in edu.honors.split(',')" 
                    :key="hIndex"
                    type="success"
                    size="mini"
                  >{{ honor }}</el-tag>
                </div>
              </div>
            </div>

            <h2>项目经验</h2>
            <div 
              v-for="(proj, index) in resumeData.projects" 
              :key="'proj-preview-' + index" 
              class="section">
              <h3>{{ proj.name }}</h3>
              <p class="role">{{ proj.role }}</p>
              <p class="duration">{{ proj.duration }}</p>
              <p>{{ proj.description }}</p>
              <p>技术栈：{{ proj.technologies }}</p>
            </div>

            <h2>技能特长</h2>
            <div class="section">
              <ul>
                <li 
                  v-for="(skill, index) in skillsList" 
                  :key="'skill-' + index">
                  {{ skill }}
                </li>
              </ul>
            </div>
          </template>

          <!-- 双栏布局 -->
          <template v-else-if="currentTemplate.styles?.columns === 2">
            <div class="two-column-layout">
              <div class="left-column">
                <div class="basic-info">
                  <div v-if="resumeData.basic.avatar" class="avatar-container">
                    <img 
                      :src="resumeData.basic.avatar" 
                      class="preview-avatar" 
                      :class="{ 'rounded': isAvatarRounded }">
                  </div>
                  <h1>{{ resumeData.basic.name }}</h1>
                  <div class="contact-info">
                    <p><i class="el-icon-user"></i> {{ resumeData.basic.gender }} | {{ resumeData.basic.age }}岁</p>
                    <p><i class="el-icon-aim"></i> {{ resumeData.basic.jobTarget }}</p>
                    <p><i class="el-icon-location"></i> {{ resumeData.basic.location }}</p>
                    <p><i class="el-icon-message"></i> {{ resumeData.basic.email }}</p>
                    <p><i class="el-icon-phone"></i> {{ resumeData.basic.phone }}</p>
                  </div>
                  <!-- 新增个人简介 -->
                  <div v-if="resumeData.basic.summary" class="summary-section">
                    <h2><i class="el-icon-notebook-2"></i> 个人简介</h2>
                    <p class="summary-content">{{ resumeData.basic.summary }}</p>
                  </div>

                  <h2>教育经历</h2>
                  <div 
                    v-for="(edu, index) in resumeData.education" 
                    :key="'edu-preview-' + index" 
                    class="section">
                    <h3>{{ edu.school }}</h3>
                    <p>{{ edu.major }}</p>
                    绩点：<span class="gpa">{{ edu.gpa }}</span>
                    <div v-if="edu.honors" class="honors">
                  <el-tag 
                    v-for="(honor, hIndex) in edu.honors.split(',')" 
                    :key="hIndex"
                    type="success"
                    size="mini"
                  >{{ honor }}</el-tag>
                </div>
                    <p>{{ formatDate(edu.period[0]) }} - {{ formatDate(edu.period[1]) }}</p>
                  </div>
                </div>
              </div>

              <div class="right-column">
                <h2>项目经验</h2>
                <div 
                  v-for="(proj, index) in resumeData.projects" 
                  :key="'proj-preview-' + index" 
                  class="section">
                  <h3>{{ proj.name }}</h3>
                  <p class="role">{{ proj.role }}</p>
                  <p class="duration">{{ proj.duration }}</p>
                  <p>{{ proj.description }}</p>
                  <p>技术栈：{{ proj.technologies }}</p>
                </div>

                <h2>技能特长</h2>
                <div class="section">
                  <ul>
                    <li 
                      v-for="(skill, index) in skillsList" 
                      :key="'skill-' + index">
                      {{ skill }}
                    </li>
                  </ul>
                </div>
              </div>
            </div>
          </template>
        </div>
      </div>
    </el-main>
  </el-container>
  <!-- 在编辑器适当位置添加提示 -->
<div class="edit-tips">
  <h6 color="grey">内容编辑建议：每个模块建议控制在300字以内、项目经验每个条目建议3-5条要点、教育经历保持时间连贯性</h6>
</div>
</div>
</template>

<script>
import html2pdf from 'html2pdf.js'

export default {
data() {
  return {
    selectedTemplateInDialog: 'template1' ,
    // selectedTemplateInDialog: null,
    activeNames: ['1', '2', '3', '4'],
    templateDialogVisible: false,
    selectedTemplate: 'template1',
    isAvatarRounded: false,
    templates: [
      {
        id: 'template1',
        name: '经典模板',
        preview: '/public/template1.jpg',
        styles: {
          avatar: 'square',
          layout: 'standard',
          themeColor: '#409EFF',
          columns: 1
        }
      },
      {
        id: 'template2',
        name: '现代简约',
        preview: '/public/template2.jpg',
        styles: {
          avatar: 'round',
          layout: 'modern',
          themeColor: '#67C23A',
          columns: 1
        }
      },
      {
        id: 'template3',
        name: '双栏布局',
        preview: '/public/template3.jpg',
        styles: {
          avatar: 'round',
          layout: 'two-column',
          themeColor: '#E6A23C',
          columns: 2
        }
      }
    ],
    resumeData: {
      basic: {
        avatar: '',
        name: '张三',
        gender: '男',
        age: 25,
        jobTarget: '前端开发工程师',
        location: '上海',
        summary: '专注前端开发领域3年，熟悉Vue技术栈，具备良好的代码规范和团队协作能力',
        email: 'zhangsan@example.com',
        phone: '138-1234-5678'
      },
      education: [{
        school: 'XX大学',
        major: '计算机科学与技术',
        degree: '本科',
        gpa: '3.8/4.0',
        honors: '校级一等奖学金(前5%)',
        period: [new Date(2018, 8), new Date(2022, 6)]
      }],
      projects: [{
        name: '在线简历生成系统',
        role: '前端负责人',
        description: '采用Vue2+ElementUI实现动态表单生成,开发PDF导出功能,实现响应式布局…',
        technologies: 'Vue2, ElementUI, HTML2PDF',
        duration: '2023.03-2023.06'
      }],
      skills: {
        list: 'Vue开发\n前端架构设计\n团队协作\n英语六级'
      }
    }
  }
},
computed: {
  selectedTemplateInDialogInfo() {
    return this.templates.find(t => t.id === this.selectedTemplateInDialog) || {}
  },
  skillsList() {
    return this.resumeData.skills.list.split('\n').filter(skill => skill.trim())
  },
  currentTemplate() {
    return this.templates.find(t => t.id === this.selectedTemplate) || {}
  },
  selectedTemplateInfo() {
    return this.templates.find(t => t.id === this.selectedTemplate) || {}
  },
  previewStyles() {
    return {
      '--theme-color': this.currentTemplate.styles?.themeColor || '#409EFF'
    }
  }
},
methods: {
  showTemplateDialog() {
    this.selectedTemplateInDialog = this.selectedTemplate
    this.templateDialogVisible = true
  },
  selectTemplate(template) {
    this.selectedTemplateInDialog = template.id
  },
  applyTemplate() {
  // 获取当前选中模板的完整对象
  const selectedTemplate = this.templates.find(t => t.id === this.selectedTemplateInDialog)
  // 更新模板ID和派生属性
  this.selectedTemplate = selectedTemplate.id
  this.isAvatarRounded = selectedTemplate.styles?.avatar === 'round'
  this.templateDialogVisible = false
  this.$message.success('模板应用成功')
},
  beforeAvatarUpload(file) {
    const isImage = file.type.startsWith('image/')
    const isLt2M = file.size / 1024 / 1024 < 2
    if (!isImage) {
      this.$message.error('上传头像只能是图片格式!')
      return false
    }
    if (!isLt2M) {
      this.$message.error('头像图片大小不能超过2MB!')
      return false
    }
    return true
  },
// 修改头像上传处理方法
handleAvatarUpload(options) {
  const file = options.file;
  const reader = new FileReader();
  reader.onload = (e) => {
    const img = new Image();
    img.onload = () => {
      const canvas = document.createElement('canvas');
      const ctx = canvas.getContext('2d');
      
      // 目标尺寸
      const targetWidth = 295;
      const targetHeight = 413;
      
      // 计算最佳裁剪区域
      const sourceRatio = img.width / img.height;
      const targetRatio = targetWidth / targetHeight;

      let sourceX = 0, sourceY = 0;
      let sourceSize = 0;

      if (sourceRatio > targetRatio) {
        // 原始图片更宽，按高度裁剪
        sourceSize = img.height;
        sourceX = (img.width - img.height * targetRatio) / 2;
      } else {
        // 原始图片更高，按宽度裁剪
        sourceSize = img.width / targetRatio;
        sourceY = (img.height - sourceSize) / 2;
      }

      // 设置画布尺寸
      canvas.width = targetWidth;
      canvas.height = targetHeight;
      
      // 绘制并缩放
      ctx.drawImage(
        img,
        sourceX,
        sourceY,
        sourceSize * targetRatio,
        sourceSize,
        0,
        0,
        targetWidth,
        targetHeight
      );
      
      this.resumeData.basic.avatar = canvas.toDataURL('image/jpeg', 0.9);
    };
    img.src = e.target.result;
  };
  reader.readAsDataURL(file);
},
  formatDate(date) {
    if (!date) return ''
    const d = new Date(date)
    return `${d.getFullYear()}.${(d.getMonth() + 1).toString().padStart(2, '0')}`
  },
  addEducation() {
    this.resumeData.education.push({
      school: '',
      major: '',
      period: []
    })
  },
  removeEducation(index) {
    this.resumeData.education.splice(index, 1)
  },
  addProject() {
    this.resumeData.projects.push({
      name: '',
      description: '',
      technologies: ''
    })
  },
  removeProject(index) {
    this.resumeData.projects.splice(index, 1)
  },
  async downloadPDF() {
      // 等待所有图片加载完成
  const waitForImages = () => {
    const images = document.querySelectorAll('#resume-preview img');
    return Promise.all(Array.from(images).map(img => {
      return img.complete ? Promise.resolve() : new Promise(resolve => {
        img.onload = resolve;
      });
    }));
  };
  await waitForImages();

    const element = document.getElementById('resume-preview')
    const opt = {
      margin: 1,
      filename: '我的简历.pdf',
      image: { type: 'jpeg', quality: 0.98 },
      html2canvas: { scale: 2, useCORS: true,logging: true,letterRendering: true,allowTaint: true },
      jsPDF: { unit: 'mm', format: 'letter', orientation: 'portrait' }
    }
    try {
      await html2pdf().set(opt).from(element).save()
      this.$message.success('PDF下载成功！')
    } catch (error) {
      this.$message.error('PDF生成失败，请重试')
    }
  }
}
}
</script>

<style lang="scss" scoped>
.resume-generator {
  height: 100vh;
  background: #f0f2f5;
}
  .el-container {
    height: 100%;

    .el-aside {
      background: #fff;
      border-right: 1px solid #ebeef5;
    }
  }

  .template-container {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 30px;
    padding: 20px;

    .template-list {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
      gap: 20px;

      .template-item {
        cursor: pointer;
        border: 2px solid #ebeef5;
        border-radius: 8px;
        overflow: hidden;
        transition: all 0.3s;

        &:hover {
          transform: translateY(-5px);
          box-shadow: 0 4px 12px rgba(0,0,0,0.1);
        }

        &.active {
          border-color: var(--theme-color);
          box-shadow: 0 0 8px rgba(var(--theme-color), 0.3);
        }

        .template-preview {
          width: 100%;
          height: 280px;
          object-fit: cover;
          border-bottom: 1px solid #ebeef5;
        }

        .template-name {
          padding: 12px;
          text-align: center;
          font-size: 14px;
          color: #606266;
        }
      }
    }

    .template-metadata {
      padding: 20px;
      background: #f8f9fa;
      border-radius: 8px;

      h3 {
        margin: 0 0 15px;
        color: #303133;
      }

      p {
        margin: 8px 0;
        color: #606266;
      }

      .color-preview {
        display: inline-block;
        width: 24px;
        height: 24px;
        border-radius: 4px;
        vertical-align: middle;
        margin-left: 10px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
      }
    }
  }

  #resume-preview {
    --theme-color: v-bind('currentTemplate.styles.themeColor'); // 添加主题颜色变量绑定
    padding: 40px;
    background: white;
    box-shadow: 0 4px 24px rgba(0,0,0,0.08);
    min-height: 1123px;  // A4纸高度
    width: 794px;        // A4纸宽度
    margin: 0 auto;
    transition: all 0.3s;

    h1 {
      font-size: 32px;
      margin: 0 0 15px;
    }

    h2 {
      font-size: 20px;
      margin: 30px 0 20px;
      padding-bottom: 8px;
      color: var(--theme-color);
    }

    h3 {
      font-size: 16px;
      margin: 15px 0 8px;
    }

    .basic-info {
      display: flex;
      align-items: center;
      margin-bottom: 30px;

      .avatar-container {
        margin-right: 30px;

        .preview-avatar {
          width: 150px !important;
          height: 200px !important;
          object-fit: cover !important;
          border: 2px solid #eee;
          border-radius: v-bind('isAvatarRounded ? "50%" : "4px"') !important;
          transition: border-radius 0.3s;
          
          &.rounded {
            border-radius: 50%;
          }
        }
      }

      .contact-info p {
        margin: 6px 0;
        font-size: 14px;
        color: #666;
      }
    }

    // 现代模板样式
    &.layout-modern {
      h2 {
        border-left: 4px solid var(--theme-color);
        padding-left: 15px;
        border-bottom: none;
      }

      .section {
        padding-left: 20px;
        margin-left: 10px;
        border-left: 2px solid #eee;
      }
    }

    // 双栏布局
    &.layout-two-column {
      .two-column-layout {
        display: grid;
        grid-template-columns: 180px 1fr; /* 调整列宽比例 */
        gap: 20px; /* 减小间距 */

        .left-column {
          padding: 25px;
          background: #f8f9fa;
          border-radius: 8px;

          .basic-info {
            flex-direction: column;
            text-align: center;

            .avatar-container {
              margin: 0 0 20px;

              .preview-avatar {
                width: 160px !important;
                height: 160px !important;
                margin-bottom: 15px;
              }
            }
          }

          h2 {
            margin-top: 30px;
          }
        }

        .right-column {
          padding-right: 30px;
        }
      }
    }

    .section {
      margin-bottom: 25px;

      p {
        line-height: 1.8;
        color: #606266;
        margin: 8px 0;
      }

      ul {
        padding-left: 24px;

        li {
          margin-bottom: 10px;
          position: relative;
          padding-left: 18px;

          &::before {
            content: "•";
            color: var(--theme-color);
            position: absolute;
            left: 0;
            font-size: 18px;
            line-height: 1;
          }
        }
      }
    }
  }

  @media print {
    #resume-preview {
      box-shadow: none !important;
      padding: 0 !important;
      width: 100% !important;
      min-height: auto !important;
      
      .preview-avatar {
        border-width: 1px !important;
      }
    }
  }

  .editor-container {
    padding: 20px;
    height: 100%;
    overflow-y: auto;

    .template-button {
      margin-bottom: 20px;
      width: 100%;
      height: 40px;
    }

    .el-collapse {
      border: none;

      :deep(.el-collapse-item__header) {
        font-size: 16px;
        font-weight: bold;
        color: #303133;
      }
    }

    .avatar-uploader {
      .upload-content {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        width: 178px;
        height: 178px;
        position: relative;
        overflow: hidden;
        transition: border-color 0.3s;

        &:hover {
          border-color: var(--theme-color);
        }

        .avatar {
          width: 100%;
          height: 100%;
          object-fit: cover;
          transition: all 0.3s;
        }

        .upload-tips {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          height: 100%;
          color: #8c939d;

          .avatar-uploader-icon {
            font-size: 28px;
            margin-bottom: 8px;
          }

          .tip-text {
            font-size: 12px;
            margin-bottom: 4px;
          }

          .size-tip {
            font-size: 10px;
            color: #c0c4cc;
          }
        }
      }
    }

    .el-button + .el-button {
      margin-left: 10px;
    }
  }

  .preview-container {
    padding: 20px;
    height: 100%;
    overflow-y: auto;
    background: #f0f2f5;

    .preview-actions {
      margin-bottom: 20px;
      text-align: center;
    }
  }

  // 新增图标
  .el-icon {
  &-user, &-message, &-phone, &-aim, &-location {
    margin-right: 5px;
    color: var(--theme-color);
  }
}
.summary-section {
  margin-bottom: 25px;
  
  h2 {
    i {
      margin-right: 8px;
    }
  }

  .summary-content {
    line-height: 1.8;
    color: #666;
    text-indent: 2em;
    margin: 15px 0;
  }
}
.contact-info {
  p {
    display: flex;
    align-items: center;
    margin: 8px 0;
    
    i {
      font-size: 16px;
      margin-right: 8px;
      min-width: 18px;
    }
  }
}

</style>